<template>
  <CkCard>
    <template #content>
      <div class="p-2 border-b">
        <div class="font-bold">{{ title }}</div>
        <div class="text-sm text-muted-foreground">{{ description }}</div>
      </div>

      <div class="px-2" v-if="warning">
        <CkAlert class="mt-2"
                     :title="warning"
                     type="warning"
                     show-icon
                     closable/>
      </div>

      <!-- <div class="p-2 flex space-x-4"> -->
      <div class="p-2 flex space-y-4 flex-col  min-h-32 overflow-x-auto">
        <slot></slot>
      </div>
    </template>

    <template #footer>
      <a v-if="codeKey"
         class="flex items-center justify-center p-2 border-t w-full"
         target="_blank"
         :href="`https://playground.view-shadcn-ui.devlive.org/?codeKey=${codeKey}`">
        <CkButton type="primary">在演练场中打开</CkButton>
      </a>
    </template>
  </CkCard>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  title: String
  description?: String
  warning?: String
  codeKey?: String
}>(), {})

</script>

<style scoped>
.space-y-4 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

</style>